<template>
	<view class="relative">
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">房间</block>
		</cu-custom>
		<view class="fixed w-100" :style="{zIndex: 999}">
			<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" v-model="searchObj.rname" placeholder="输入搜索的关键词" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-main  round" @tap="search">搜索</button>
				</view>
			</view>
			<view class="bg-white" :style="{height: StatusBar+'px'}">
				<search-bar @change="search"></search-bar>
			</view>
		</view>
		<view :style="{paddingTop: StatusBar*2+'px'}">
			<view class="padding-sm" v-for="(room,index) in rooms" :key="index">
				<view class="bg-white shadow radius">
					<room-item :path="'/pages/cxy/fj'" :room="room"></room-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from './searchBar.vue';
	export default {
		components: {
			"search-bar": searchBar
		},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				rooms: [],
				pageInfo: {
					current: 1,
					size: 16,
					total: 0
				},
				locamap: {},
				tp: {},
				func: {},
				searchObj: {
					rname: "",
					storeid: "",
					tp: "",
					func: "",
					cd: null,
					st: null,
					et: null
				}
				
			}
		},
		computed: {
			currentPosition: function() {
				if (this.store.state.position) {
					return this.store.state.position;
				}
				return undefined;
			}
		},
		created: function(){
			this.func = this.constant.roomfunc.ROOMFUNC;
			this.tp = this.constant.roomtp.ROOMTP;
		},
		onLoad: function(){
			this.search();
		},
		methods: {
			search: function(param) {
				this.rooms = [];
				this.pageInfo.current = 1;
				this.loadRooms(param);
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadRooms();
			},
			loadRooms: function(param) {
				
				if (param) {
					this.searchObj.storeid = param.storeid;
					this.searchObj.func = param.func;
					this.searchObj.tp = param.tp;
					this.searchObj.cd = param.cd;
					this.searchObj.st = param.st;
					this.searchObj.et = param.et;
				}
				
				this.searchObj.current = this.pageInfo.current;
				this.searchObj.size = this.pageInfo.size;
				this.searchObj.flg = true;
				
				if (this.currentPosition) {
					this.searchObj.jd = this.currentPosition.jd;
					this.searchObj.wd = this.currentPosition.wd;
				}
				
				this.api("/room/page").send(this.searchObj).then(data => {
					this.pageInfo.current = data.arooms.current;
					for (let index in data.arooms.records) {
						let record = data.arooms.records[index];
						record.sheng = this.location.localmap.cmap[record.pcode].criname;
						record.shi = this.location.localmap.cmap[record.scode].criname;
						record.qu = this.location.localmap.cmap[record.qcode].criname;
						record.tpname = this.tp[record.tp];
						record.funcname = this.func[record.func];
						if (record.distance) {
							record.distance = this.util.formatDistance(record.distance);
						}
						this.rooms.push(record);
					}
				});
				
			
			},
		}
	}
</script>

<style>
</style>